<template>
	<view class="home">
		<image class="home-img"
			src="http://cdn.lawss360.com/UpLoad/Product/2022/12/29/7160cab5a33243d582f900d5841435af.png"
			mode="widthFix"></image>
		<view class="showbox">
			<view class="showbox-top">
				法律服务包1500/2500/3500/8000元
			</view>
			<view class="showbox-top-a">
				￥1500
			</view>
			<view class="showbox-top-b">
				销售55646
			</view>
		</view>
		<view class="showbox-bon">
			<view class="showbox-bon-a">
				规格
			</view>
			<view class="showbox-bon-b">
				1500元，1件<u-icon name="arrow-right" color="#a6a6a6" size="20"></u-icon>
			</view>
		</view>
		<view class="showbox-bon">
			<view class="showbox-bon-a">
				资料下载
			</view>
			<view class="showbox-bon-b">
				<u-icon name="arrow-right" color="#a6a6a6" size="20"></u-icon>
			</view>
		</view>
		<view class="showbox-show">
			商品详情
		</view>
		<view class="">
			<image class="home-img"
				src="http://cdn.lawss360.com/UpLoad/RichText/2022/09/29/4110e5adf2534723bc93de10dc874297.jpg"
				mode="widthFix"></image>
		</view>
		<view class="showbox-tab">
			<view class="showbox-tab-a">
				<view class="showbox-tab-a-a">
					<u-icon name="home" color="#666" size="28"></u-icon>
					首页
				</view>
				<view class="showbox-tab-a-a" @click="share">
					<u-icon name="share-square" color="#666" size="28"></u-icon>
					分享
				</view>
				<view class="showbox-tab-a-a">
					<u-icon name="account" color="#666" size="28"></u-icon>
					我的
				</view>
				<view class="showbox-tab-b">
					立即购买
				</view>
			</view>
		</view>
		<view class="painter">
			<image :src="painter" mode="widthFix"></image>
		</view>
		<l-painter ref="painter" :isCanvasToTempFilePath="true" custom-style="position: fixed; left: 200%"
			css="width: 750rpx; padding-bottom: 40rpx; paddingtop: 40rpx;background: linear-gradient(,#ff971b 0%, #ff5000 100%)">			
			<l-painter-view css="margin-top: 40rpx; display: inline-block;">
				<l-painter-image src="https://limeui.qcoon.cn/assets/logo.64379736.svg"
					css="margin-left: 40rpx;  width: 84rpx;  height: 84rpx;">
				</l-painter-image>
			</l-painter-view>
			<l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				
			
				<l-painter-image
					src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
					css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;">
				</l-painter-image>
				<l-painter-text
					css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 606rpx; box-sizing: border-box;margin-top: 30rpx"
					text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"></l-painter-text>
				<l-painter-view css="margin-top: 30rpx; display: inline-block;">
					<l-painter-image src="https://limeui.qcoon.cn/assets/logo.64379736.svg"
						css="margin-top:20rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;">
					</l-painter-image>
					<l-painter-view css="margin-top:20rpx; padding-left: 20rpx; display: inline-block;width:360rpx">
						<l-painter-text text="隔壁老王"
							css="display: block; padding-bottom: 10rpx; color: #000; font-size: 32rpx; fontWeight: bold">
						</l-painter-text>
						<l-painter-text text="为您挑选了一个好物" css="color: rgba(0,0,0,.7); font-size: 24rpx"></l-painter-text>
					</l-painter-view>
					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				painter: ''
			}
		},
		components: {

		},
		onLoad(option) {

		},
		onShow() {
			console.log(uni.$tm.vx.state())
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		// 加载更多
		onReachBottom() {

		},
		methods: {
			end(e) {
				console.log(e)
			},
			share() {
				// 生成图片
				console.log(1);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);

						this.painter = res.tempFilePath

						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('save success');
							}
						});
					},
				});
			}
		}
	}
</script>
<style scoped>
	.painter {
		width: 710rpx;
		position: fixed;
		left: 20rpx;
		z-index: 99999;
		top: 0;
	}

	.home-img {
		width: 750rpx;
	}

	.showbox {
		padding: 25rpx;
		background-color: #fff;
	}

	.showbox-top {
		color: black;
		font-size: 35rpx;
	}

	.showbox-top-a {
		color: #fe6e18;
		line-height: 80rpx;
		font-size: 35rpx;
	}

	.showbox-top-b {
		color: #c1c1c1;
		font-size: 30rpx;
	}

	.showbox-bon {
		margin: 20rpx 0;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.showbox-bon-a {
		color: #424242;
	}

	.showbox-bon-b {
		display: flex;
		color: #a6a6a6;
	}

	.showbox-show {
		text-align: center;
		color: #a6a6a6;
		font-size: 30rpx;
		line-height: 60rpx;
	}

	.showbox-tab {
		width: 670rpx;
		position: fixed;
		justify-content: space-between;
		bottom: 0rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
	}

	.showbox-tab-a {
		display: flex;
		justify-content: space-between;
	}

	.showbox-tab-b {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
		border-radius: 50rpx;
		width: 350rpx;
		height: 80rpx;
		background-color: #fe6e18;
		color: #fff;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
